import React, { Component } from 'react';
import ThePagination from "@/components/ThePagination";
import { Form, Input, Select, Space, Button, DatePicker, Row, Col, Tree, Modal } from "antd";
import { SearchOutlined } from "@ant-design/icons";
import TheTable from "@/components/TheTable";
import TheButton from "@/components/TheButton";
import { apiGetGoodsClassifyTreeAll } from '@/request/mallManagement/index.jsx'
import { apiStockLibraryManageSkuPage, apistockLibraryGoodsWarning } from '@/request/storageManager/store.js'
import { apiStoreInfoList } from '@/request/storeInfo/index.jsx'
import WarnTable from './components/warn'
import TheQueryForm from '@/components/TheQueryForm';
import TheTableExtend from '@/components/TheTableExtend'
import store from "@/store/store"
const { DirectoryTree } = Tree;
const { Option } = Select
export default class OutPut extends Component {
  constructor() {
    super()
    this.formRef = React.createRef()
    this.state = {
      treeData: [

      ],
      columns: [
        {
          title: "物品编码",
          dataIndex: "goodsSkuNo",
          key: "goodsSkuNo",
          render: (text, render) => {
            return text
          }
        },
        {
          title: "物品名称",
          dataIndex: "goodsName",
          key: "goodsName",
          render: (text, render) => {
            return text
          }
        },
        {
          title: "规格",
          dataIndex: "sku",
          key: "sku",
          render: (text, render) => {
            return text
          }
        },
        {
          title: "物品分类",
          dataIndex: "goodsClassifyName",
          key: "goodsClassifyName",
          render: (text, render) => {
            return text
          }
        },
        {
          title: "所属门店",
          dataIndex: "storeName",
          key: "storeName",
          render: (text, render) => {
            return text
          }

        },
        {
          title: "操作",
          dataIndex: "serviceShowFile",
          key: "serviceShowFile",
          fixed: 'right',
          render: (text, render) => {
            return <div>
              <TheButton haspermi={['storage:store:goodsWarn']} onClick={() => this.warnList(render)} >库存预警</TheButton>

            </div>
          }
        },
      ],
      dataSource: [],
      pageData: {
        pageNo: 1,
        pageSize: 10
      },
      pageWarn: {
        pageNo: 1,
        pageSize: 10
      },
      total: 0,
      isModalVisible: false,
      tree: [],
      name: '',
      storeId: '',
      rowStoreId: '',
      goodsClassifyId: '',
      goodsSkuNo: '',
      storeList: [],
      newColumns: [],
      form_show: true,
      searchOption: [
        { field: 'goodsSkuNo', label: '物品编码', placeholder: '物品编码', required: false, rules: [], type: 'Input', defaultValue: '' },
        { field: 'name', label: '物品名称', placeholder: '物品名称', required: false, rules: [], type: 'Input', defaultValue: '' },
        { field: 'storeId', label: '门店', placeholder: '门店', value: 'storeId', txt: 'storeName', required: false, rules: [], type: 'Select', options: [], defaultValue: '' },
      ],
      queryForm: {},
    }
  }
  componentDidMount() {
    this.onColumnsFilter(this.state.columns)
    this.getData()
    this.getStoreInfoList()
  }
  async getStoreInfoList() {
    let res = await apiStoreInfoList({ storeStatus: "Y", isProprietary: 'Y' })
    if (res.code === 0) {
      this.state.searchOption[2].options = res.data
      this.setState(
        {
          storeList: res.data,
          searchOption: this.state.searchOption
        }
      )
    }
  }
  async warnList(row) {
    let res = await apistockLibraryGoodsWarning({ goodsSkuId: row.goodsSkuId, dataId: row.storeId })
    if (res.code === 0) {
      this.setState({
        isModalVisible: true,
        rowStoreId: row.storeId,
        goodsSkuNo: row.goodsSkuNo,
        warnData: res.data.map(item => {
          return {
            key: item.libraryId,
            ...item
          }
        }),
        modalTitle: `为【${row.goodsName}】设置库存预警`
      })
    }

  }
  async getListByTree(values) {
    this.setState({
      queryForm: values === undefined ? this.state.queryForm : { ...values }
    }, async () => {
      let { pageNo, pageSize } = this.state.pageData
      let res = await apiStockLibraryManageSkuPage({
        pageNo,
        pageSize,
        ...this.state.queryForm,
        goodsClassifyId: this.state.goodsClassifyId ? this.state.goodsClassifyId : "",
      })
      if (res.code === 0) {
        this.setState({
          dataSource: res.data.records,
          total: res.data.total
        })
      }
    })

  }
  async getData(level, sourceId) {
    let res = await apiGetGoodsClassifyTreeAll()
    if (res.code === 0) {
      let data = this.guide(res.data)
      this.setState({
        treeData: data
      }, () => {

        console.log(this.state.treeData);
      })
    }
  }
  guide(data) {
    return data.map(item => {
      if (item.hasOwnProperty('children') && item.children && item.children.length > 0) {
        return {
          title: item.label,
          key: item.value,
          children: this.guide(item.children),
        }
      } else {
        return {
          title: item.label,
          key: item.value,

        }
      }

    })
  }
  pageChange = (pageNo, pageSize) => {
    this.setState({
      pageData: {
        pageNo, pageSize
      }
    }, () => {
      this.getListByTree()
    })
  };



  onSelect = (e) => {
    this.setState({
      goodsClassifyId: e
    }, () => {
      this.pageChange(1, 10)
    })
  }
  onReset() {
    this.setState({
      queryForm: {}
    }, () => {
      this.pageChange(1, 10)
    })
  }
  onColumnsFilter(value) {
    this.setState({
      newColumns: value
    })
  }
  render() {
    let { columns, dataSource, modalTitle, warnData, rowStoreId, goodsSkuNo, storeList, form_show, searchOption, newColumns, pageData, total, treeData, isModalVisible } = this.state
    return (
      <div className="p-layout-box commodity-examine">
        <Row gutter={20}>
          <Col span={8}>
            <DirectoryTree
              multiple
              defaultExpandAll
              treeData={treeData}
              onSelect={this.onSelect}
            />
          </Col>
          <Col span={16}>
            {/* <Form layout={'inline'} ref={this.formRef} onFinish={this.onFinish} style={{ marginBottom: 12 }}>
                            <Form.Item name={"name"}>
                                <Input style={{ width: 240 }} suffix={<SearchOutlined />} placeholder={"物品名称"} />
                            </Form.Item>
                            <Form.Item name={"storeId"}>
                                <Select style={{ width: 240 }} placeholder={'请选择门店'}>
                                    {
                                        storeList.map(item => {
                                            return <Option value={item.storeId}>{item.storeName}</Option>
                                        })
                                    }

                                </Select>
                            </Form.Item>
                            <Form.Item>
                                <Space size="small" style={{ marginLeft: 10 }}>
                                    <Button type="primary" htmlType="submit">
                                        查询
                                    </Button>
                                    <Button onClick={this.onReset}>重置</Button>
                                </Space>
                            </Form.Item>
                        </Form> */}
            <TheQueryForm ref={(ref) => this.queryFormRef = ref} show={form_show} option={searchOption}
              onGetValues={(values) => this.getListByTree(values)}
              onReset={(values) => this.onReset(values)}
            >
            </TheQueryForm>
            <TheTableExtend
              columns={columns}
              onFormTrigger={() => this.setState({ form_show: !this.state.form_show })}
              onTableRefresh={() => this.getListByTree()}
              onColumnsFilter={(value) => this.onColumnsFilter(value)}
            >
            </TheTableExtend>
            <TheTable
              scroll={{ x: "max-content", y: '63vh' }}
              columns={newColumns}
              dataSource={dataSource}
            />
            <ThePagination
              pageNo={pageData.pageNo}
              pageSize={pageData.pageSize}
              total={total}
              pageChange={this.pageChange}
            /></Col>

        </Row>
        <Modal title={modalTitle} visible={isModalVisible} width="50%"
          onCancel={() => this.setState({ isModalVisible: false })} footer={null}>
          <WarnTable dataSource={warnData} rowStoreId={rowStoreId} goodsSkuNo={goodsSkuNo}></WarnTable>
        </Modal>
      </div>
    );
  }
}
